<template>
<view>
<!--index.wxml-->
<view class="main">
      <view class="topbox">
        <view class="topbg"></view>
        <image class="bgimg" src="/static/images/userbg.png" alt></image>
        <view class="rightbox">
          <view @tap.stop="clickMenu" data-url="/pages/user/message_notice/message_notice" class="left">
            <view v-if="!userInfo.message_count == 0" class="message">{{userInfo.message_count > 99?'99+':userInfo.message_count}}</view>
            <image src="/static/images/icon_message.png" alt></image>
          </view>
          <view @tap.stop="clickMenu" data-url="/pages/user/userinfo/userinfo" class="right">
            <image src="/static/images/icon_setteing.png" alt></image>
          </view>
        </view>
        <!-- 头像 -->
        <view class="tou_fiter">
          <view class="toparea clearfix">
            <view class="left clearfix">
              <view @tap.stop="clickMenu" data-url="/pages/user/userinfo/userinfo" class="img">
                <image mode="aspectFill" :src="userInfo.head_pic?userInfo.head_pic:defaultAvatar" alt></image>
              </view>
              <view @tap.stop="clickMenu" data-url="/pages/user/userinfo/userinfo" class="name_lan">
                <view>
                  <view @tap.stop="login" class="center over_hide">{{userInfo.nickname?userInfo.nickname:userInfo.user_id?userInfo.user_id + '用户' : '点击登录'}}</view>
                  <view class="title">{{userInfo.describe?userInfo.describe:'注册会员'}}</view>
                </view>
                 <button v-if="userInfo.user_id && !userInfo.openid" open-type="getUserInfo" @getuserinfo="bindGetUserinfo" class="title portrait ml20" @tap.stop="inexistence">授权头像昵称</button>  
              </view>
              <!--  --> 
              <!-- 签到 -->
              <view class="sign_in_1 des_flex_2">
                <navigator @tap.stop="clickMenu" data-url="/pages/user/sign_in/sign_in" class="sign_in">
                  <image src="/static/images/jf_1.png"></image>签到赚积分
                </navigator>
              </view>
            </view>
          <!-- <view catchtap='clickMenu' wx:if="{{sign != 0}}" data-url="/pages/user/sign_in/sign_in" class="right">
            签到 >
          </view> -->
          </view>
        </view>
        <!-- 面额值 -->
        <view class="topmain">
          <view class="bottomarea">
            <view @tap.stop="clickMenu" data-url="/pages/user/account/account" class="item" v-if="is_apply==0">
              <view class="num">{{userInfo.user_money?userInfo.user_money:0}}</view>
              <view class="word">余额</view>
            </view>
            <view @tap.stop="clickMenu" data-url="/pages/user/points_list/points_list" class="item">
              <view class="num">{{userInfo.pay_points?userInfo.pay_points:0}}</view>
              <view class="word">积分</view>
            </view>
            <view @tap.stop="clickMenu" data-url="/pages/user/coupon/coupon" class="item">
              <view class="num">{{userInfo.coupon_count?userInfo.coupon_count:0}}</view>
              <view class="word">优惠券</view>
            </view>
          </view>
        </view>
      </view>
      <view class="manage-list">
        <!-- 订单列表 -->
        <view class="middlebox">       
          <view @tap.stop="clickMenu" data-url="/pages/user/order_list/order_list" :to="{name:'order_list'}" class="topnav des_flex_3">
            <view class="right">订单</view>
            <view class="lid des_flex_4">
              <view class="add">全部订单</view>
              <image src="/static/images/xr_3.png" class="icon"></image>
            </view>
          </view>
          <view class="mainbox des_flex_4">
            <view @tap.stop="clickMenu" data-url="/pages/user/order_list/order_list?type=1" class="item">
              <view class="img">
                <image src="/static/images/user_order_1.png" alt></image>
                <view v-if="!userInfo.waitPay == 0" class="note">{{userInfo.waitPay > 99?'99+': userInfo.waitPay}}</view>
              </view>
              <view class="p">待付款</view>
            </view>
            <view @tap.stop="clickMenu" data-url="/pages/user/order_list/order_list?type=2" class="item">
              <view class="img">
                <image src="/static/images/user_order_1.png" alt></image>
                <view v-if="!userInfo.waitSend == 0" class="note">{{userInfo.waitSend > 99?'99+': userInfo.waitSend}}</view>
              </view>
              <view class="p">待发货</view>
            </view>
            <!-- 这个值没有 -->
            <!-- <view catchtap='clickMenu'  data-url="/pages/user/order_list/order_list?type=2" class="item">
              <view class="img">
                <image src="../../../images/user_order_2.png" alt=""></image>
                <view wx:if='{{!userInfo.waitSend == 0}}' class="note">{{userInfo.waitSend > 99?'99+': userInfo.waitSend}}</view>
              </view>
              <view class="p">待发货</view>
            </view> -->
            <view @tap.stop="clickMenu" data-url="/pages/user/order_list/order_list?type=3" class="item">
              <view class="img">
                <image src="/static/images/user_order_3.png" alt></image>
                <view v-if="!userInfo.waitReceive == 0" class="note">{{userInfo.waitReceive > 99?'99+':userInfo.waitReceive}}</view>
              </view>
              <view class="p">待收货</view>
            </view>
            <view @tap.stop="clickMenu" data-url="/pages/user/comment/comment?status=0" class="item">
              <view class="img">
                <image src="/static/images/user_order_4.png" alt></image>
                <view v-if="!userInfo.uncomment_count == 0" class="note">{{userInfo.uncomment_count > 99?'99+':userInfo.uncomment_count}}</view>
              </view>
              <view class="p">待评价</view>
            </view>
            <view @tap.stop="clickMenu" data-url="/pages/user/return_goods_list/return_goods_list" class="item">
              <view class="img">
                <image src="/static/images/user_order_5.png" alt></image>
                <view v-if="!userInfo.return_count == 0" class="note">{{userInfo.return_count > 99?'99+':userInfo.return_count}}</view>
              </view>
              <view class="p">退换/售后</view>
            </view>
          </view>
        </view>
        <!-- 必备功能 -->
        <view v-for="(menu, index) in userInfoList.manageList" :key="index" class="footbox">
          <view class="mainbox"> 
            <view v-for="(item, index2) in menu" :key="index2" v-if="item.menu_id != 1" @tap.stop="clickMenu" :data-url="item.mini_url" class="item des_flex_4">
              <view>
                <image :src="url + '' + item.pic" alt></image>
                <view class="p">{{item.menu_name?item.menu_name:item.default_name}}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="footbox">
          <view class="topnav">必备功能</view>
          <view class="mainbox"> 
            <view wx:for="{{userInfoList.manageList}}" wx:if="{{item.menu_id != 1}}" wx:key="{{index}}"  catchtap='clickMenu' data-url="{{item.mini_url}}" class="item des_flex_4">
              <view>
                <image src="{{url}}{{item.pic}}" alt=""></image>
                <view class="p">{{item.menu_name?item.menu_name:item.default_name}}</view>
              </view>
            </view>
            <view  class="item des_flex_4" catchtap='clickMenu' data-url="/pages/play/playData/playData">
              <view class="img">
                <image src="http://www.maizixsp.com/public/miniapp/ss_20.png"></image>
                 <view class="p">我要直播</view>  
              </view>
            </view>
            <view catchtap='authorization' class="item des_flex_4">
              <view>
                <image src="../../../images/author.png" alt=""></image>
                <view class="p">授权管理</view>
              </view>
            </view>
          </view>
        </view> -->
     </view>
 </view>

<!-- 底部菜单 -->
<!--<import src="../../index/publics/publics.wxml"></import>-->
<block v-if="menu_model.length > 0">
    <block data-type="template" data-is="model" data-attr="page:menu_index,menu_model:menu_model,url:url,defaultMenu:defaultMenu">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <view class="tpd-footer tpd-footer2" v-if="[].length > 0">
       <block v-for="(item, index) in []" :key="index">
        <view hover-class="none" @tap.stop="topage" data-obj="custom" :data-idx="index" :class="menu_index == index ? 'tpd-footer-select' : ''"><image :src="menu_index == index ? url + item.pic2 : url + item.pic1"></image><text :style="'color:' + (menu_index == index ? item.navFontColor : '')">{{item.title_name}}</text></view>  
        </block> 
    </view>

    <view class="tpd-footer tpd-footer1" v-if="defaultMenu">
        <view hover-class="none" @tap.stop="topages" data-idx="0" :class="menu_index == 0 ? 'tpd-footer-select' : ''"><image :src="menu_index == 0 ? '/images/home2.png' : '/images/home1.png'"></image><text>首页</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="1" :class="menu_index == 1 ? 'tpd-footer-select' : ''"><image :src="menu_index == 1 ? '/images/category2.png' : '/images/category1.png'"></image><text>分类</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="4" :class="menu_index == 4 ? 'tpd-footer-select' : ''"><image :src="menu_index == 4 ? '/images/play2.png' : '/images/play1.png'"></image><text>直播</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="2" :class="menu_index == 2 ? 'tpd-footer-select' : ''"><image :src="menu_index == 2 ? '/images/cart2.png' : '/images/cart1.png'"></image><text>购物车</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="3" :class="menu_index == 3 ? 'tpd-footer-select' : ''"><image :src="menu_index == 3 ? '/images/user2.png' : '/images/user1.png'"></image><text>我的</text></view>
    </view>
  </view>
</block>
</block>

<block v-else>
    <block data-type="template" data-is="model" data-attr="page:3,menu_model:[],url:url,defaultMenu:defaultMenu">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <view class="tpd-footer tpd-footer2" v-if="[].length > 0">
       <block v-for="(item, index) in []" :key="index">
        <view hover-class="none" @tap.stop="topage" data-obj="custom" :data-idx="index" :class="menu_index == index ? 'tpd-footer-select' : ''"><image :src="menu_index == index ? url + item.pic2 : url + item.pic1"></image><text :style="'color:' + (menu_index == index ? item.navFontColor : '')">{{item.title_name}}</text></view>  
        </block> 
    </view>

    <view class="tpd-footer tpd-footer1" v-if="defaultMenu">
        <view hover-class="none" @tap.stop="topages" data-idx="0" :class="menu_index == 0 ? 'tpd-footer-select' : ''"><image :src="menu_index == 0 ? '/images/home2.png' : '/images/home1.png'"></image><text>首页</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="1" :class="menu_index == 1 ? 'tpd-footer-select' : ''"><image :src="menu_index == 1 ? '/images/category2.png' : '/images/category1.png'"></image><text>分类</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="4" :class="menu_index == 4 ? 'tpd-footer-select' : ''"><image :src="menu_index == 4 ? '/images/play2.png' : '/images/play1.png'"></image><text>直播</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="2" :class="menu_index == 2 ? 'tpd-footer-select' : ''"><image :src="menu_index == 2 ? '/images/cart2.png' : '/images/cart1.png'"></image><text>购物车</text></view>
        <view hover-class="none" @tap.stop="topages" data-idx="3" :class="menu_index == 3 ? 'tpd-footer-select' : ''"><image :src="menu_index == 3 ? '/images/user2.png' : '/images/user1.png'"></image><text>我的</text></view>
    </view>
  </view>
</block>
</block>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      defaultAvatar: setting.resourceUrl + "/static/static/images/user68.jpg",
      userInfo: {
        collect_count: 0,
        message_count: 0,
        waitPay: 0,
        waitReceive: 0,
        uncomment_count: 0,
        return_count: 0,
        user_money: 0,
        coupon_count: 0,
        pay_points: 0
      },
      defaultMenu: false,
      //默认底部菜单显示状态
      distribut: 0,
      sign: 0,
      webUrl: '',
      click: false,
      //避免多次发出登录请求造成token的覆盖
      is_apply: 0,
      menu_index: "",
      menu_model: "",
      head_color: ""
    };
  },

  components: {},
  props: {},
  onShow: function () {
    var that = this;
    that.click = false;
    this.hidetabbar();

    if (app.globalData.menu_model.length == 0) {
      app.globalData.menu_index = 3;
    } else {
      //遍历自定义底部，该页面在哪个位置
      for (var i in app.globalData.menu_model) {
        if (app.globalData.menu_model[i].app_url.indexOf('User/index') != -1) {
          app.globalData.menu_index = i;
        }
      }
    }

    that.setData({
      defaultMenu: app.globalData.defaultMenu,
      menu_index: app.globalData.menu_index,
      menu_model: app.globalData.menu_model,
      distribut: common.getConfigByName(app.globalData.config['config'], 'switch'),
      sign: common.getConfigByName(app.globalData.config['config'], 'sign_on_off')
    });
    var status = false; //先预设值，加速加载

    if (app.globalData.userInfo) {
      that.setData({
        userInfo: app.globalData.userInfo
      });
      status = true;
    }

    if (!app.globalData.auth.isAuth()) {
      app.globalData.showLoading(null, 1500);
    }

    if (status) {
      app.globalData.getUserInfo(function (userInfo) {
        that.setData({
          userInfo: userInfo
        });
      }, true, false);
    }

    request.get('/api/user/center_menu', {
      success: function (res) {
        // wx.setStorageSync('custom_menu', res.data.result.menu_list);
        // that.menu(res.data.result.menu_list);
        uni.setStorageSync('custom_menu', res.data.result.new_menu_list);
        that.menu(res.data.result.new_menu_list);
        that.setData({
          head_color: res.data.result.header_background
        });
      }
    });
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ff6a00',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    });
    uni.setBackgroundColor({
      backgroundColor: '#eeeeee',
      backgroundColorTop: '#eeeeee',
      backgroundColorBottom: '#eeeeee'
    });
  },
  onLoad: function () {
    var that = this;
    that.setData({
      is_apply: app.globalData.is_apply
    }); //预加载自定义缓存菜单

    if (uni.getStorageSync('custom_menu')) {
      that.menu(uni.getStorageSync('custom_menu'));
    }

    if (app.globalData.menu_model.length == 0 || !app.globalData.menu_model) {
      request.get('/api/Index/getConfig', {
        failRollback: true,
        successReload: true,
        success: function (res) {
          var data = res.data.result.config;
          var is_block = common.getConfigByName(data, 'is_block_index');

          if (is_block == 0) {
            uni.removeStorageSync('custom_data');
            app.globalData.menu_model = [];
            that.setData({
              defaultMenu: true,
              menu_model: []
            });
            app.globalData.defaultMenu = true;
          } else {
            that.getAutoData();
          }
        }
      });
    }
  },
  onPullDownRefresh: function (e) {
    var that = this;
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      });
      uni.stopPullDownRefresh();
    }, true);
  },
  methods: {
    getAutoData: function (id) {
      var that = this;
      var url = !id ? '/api/Index/block_index' : '/api/Index/block_index/id/' + id;
      request.get(url, {
        failRollback: true,
        successReload: true,
        success: function (res) {
          if (res.data.status == 1) {
            that.customRendering(res.data.result.blocks);
          }
        }
      });
    },
    bindGetUserinfo: function (res) {
      var that = this;

      if (res.detail.userInfo != undefined) {
        try {
          uni.setStorageSync('wx_user_info', res.detail);
          app.globalData.wechatUser = res.detail.userInfo;
          app.globalData.auth.checkLogin(app.globalData.code, res.detail, function (loginData) {
            app.globalData.showSuccess('授权信息成功！', function () {
              uni.removeStorageSync('first_leader');
              uni.removeStorageSync('unique_id');
              that.setData({
                'userInfo.head_pic': loginData.head_pic,
                'userInfo.nickname': loginData.nickname,
                'userInfo.openid': loginData.openid
              });
            });
          });
        } catch (e) {
          console.log(e);
        }
      } else {
        console.log('bindGetUserinfo fail . res.detail.userInfo is undefined');
      }

      return false;
    },

    /** 自定义组件渲染 */
    customRendering: function (custom) {
      var that = this;
      var data = custom;
      var menu_model = []; //菜单集合

      for (let z = 0; z < data.length; z++) {
        if (data[z]['block_type'] == '11') {
          menu_model = data[z];
        }
      }

      app.globalData.menu_model = menu_model.nav;

      for (var i in app.globalData.menu_model) {
        if (app.globalData.menu_model[i].app_url.indexOf('User/index') != -1) {
          app.globalData.menu_index = i;
        }
      }

      that.setData({
        defaultMenu: app.globalData.defaultMenu,
        menu_index: app.globalData.menu_index,
        menu_model: app.globalData.menu_model
      });
    },

    /** 首次登陆小程序，授权用户信息 */
    login: function () {
      var that = this;
      if (that.click) return false;
      that.click = true;

      if (!that.userInfo.user_id) {
        app.globalData.getUserInfo(function (userInfo) {
          that.click = false;
          that.setData({
            userInfo: userInfo
          });
        }, true, false);
      } else {
        that.click = false;
      }
    },
    menu: function (data) {
      var menu = [{
        id: 2,
        url: '/pages/user/coupon/coupon',
        logo: "/static/images/wy.png"
      }, //我的优惠券            
      {
        id: 4,
        url: '/pages/distribut/index/index',
        logo: "/static/images/w1.png"
      }, //我的团队
      {
        id: 5,
        url: '/pages/virtual/virtual_list/virtual_list',
        logo: "/static/images/w10.png"
      }, //虚拟订单
      {
        id: 6,
        url: '/pages/team/team_order/team_order',
        logo: "/static/images/w4.png"
      }, //拼团订单
      {
        id: 9,
        url: '/pages/user/comment/comment?status=1',
        logo: "/static/images/w2.png"
      }, //我的评价  
      {
        id: 12,
        url: '/pages/activity/coupon_list/coupon_list',
        logo: "/static/images/w7.png"
      }, //领券中心
      {
        id: 13,
        url: '/pages/user/collect_list/collect_list',
        logo: "/static/images/w17.png"
      }, //我的收藏
      {
        id: 14,
        url: '/pages/user/visit_log/visit_log',
        logo: "/static/images/w3.png"
      }, //浏览历史             
      {
        id: 15,
        url: '/pages/user/message_notice/message_notice',
        logo: "/static/images/w18.png"
      }, //消息通知
      {
        id: 17,
        url: '/pages/user/address_list/address_list',
        logo: "/static/images/w8.png"
      }, //地址管理     
      {
        id: 10,
        url: '/pages/goods/integralMall/integralMall',
        logo: "/static/images/w5.png"
      }, //积分商城 
      // { id: 10, url: '', logo: '../../../images/w5.png' },                                              //积分兑换
      {
        id: 11,
        url: '/pages/user/sign_in/sign_in',
        logo: "/static/images/w11.png"
      }, //我的签到
      {
        id: 16,
        url: '',
        logo: "/static/images/w15.png"
      }, //我的发票
      {
        id: 7,
        url: '/pages/bespeak/bespeak_list/bespeak_list',
        logo: "/static/images/w19.png"
      }, //预约订单
      {
        id: 8,
        url: '/pages/shop_order/shop_order_list/shop_order_list',
        logo: "/static/images/w14.png"
      }, //自提订单  
      {
        id: 3,
        url: '/pages/distribut/poster/poster',
        logo: "/static/images/w16.png"
      }, //我的海报      
      {
        id: 18,
        url: '/pages/Bargain/order_list/order_list',
        logo: "/static/images/w16.png"
      }, //砍价活动和订单    
      {
        id: 19,
        url: 'webview',
        logo: "/static/images/w19.png"
      } //使用帮助
      ]; // for(let j=1;j<=menulist.length;j++) {
      //     var data = menulist[j];
      //     for(let i = 0; i < data.length;i++){
      //         for (let ii = 0; ii < menu.length; ii++) {
      //             if (data[i]['menu_id'] == menu[ii]['id']){
      //                 data[i]['url'] = menu[ii]['url']
      //                 data[i]['logo'] = menu[ii]['logo']
      //             }
      //         }  
      //     }
      // }
      // for(let i = 0; i < data.length;i++){
      //     for (let ii = 0; ii < menu.length; ii++) {
      //         if (data[i]['menu_id'] == menu[ii]['id']){
      //             data[i]['url'] = menu[ii]['url']
      //             data[i]['logo'] = menu[ii]['logo']
      //         }
      //     }  
      // }

      this.setData({
        'userInfoList.manageList': data
      });
      console.log(this.userInfoList.manageList);
    },

    clickMenu(e) {
      var that = this;
      if (that.click) return false;
      that.click = true; //在个人中心浏览其他入口页面前判断是否登录

      if (!that.userInfo.user_id) {
        app.globalData.getUserInfo(function (userInfo) {
          that.setData({
            userInfo: userInfo,
            click: false
          });
        }, true, false);
        return false;
      }

      if (e.currentTarget.dataset.url == '/pages/distribut/index/index') {
        if (that.distribut == 0) {
          that.click = false;
          return app.globalData.showTextWarining('分销功能已关闭');
        }
      }

      if (e.currentTarget.dataset.url == '/pages/user/sign_in/sign_in') {
        if (that.sign == 0) {
          that.click = false;
          return app.globalData.showTextWarining('签到功能已关闭');
        }
      }

      if (e.currentTarget.dataset.url == 'webview') {
        this.setData({
          webUrl: "/Mobile/User/userHelpList/app/3"
        });
        uni.navigateTo({
          url: '/pages/index/webview/webview'
        });
        return false;
      }

      uni.navigateTo({
        url: e.currentTarget.dataset.url
      });
    },

    /** 跳转模式 自定义页面 || 自定义菜单 || 自定义控件控件*/
    topage(e) {
      //自定义菜单
      var idx = e.currentTarget.dataset.idx;
      app.globalData.menu_index = idx;
      var page_type = this.menu_model[idx].url_type;
      var id = this.menu_model[idx].app_url; //判断跳转的类型  0 = 外部网址,1 = 小程序页面，2 = 分类商品，3 = 商品详情 ，4 = 自定义页面

      if (page_type == 1) {
        //要访问的页面idx，当前页面menu_index
        common.totabar(idx, this.menu_index, this.menu_model);
      } else if (page_type == 2) {
        uni.navigateTo({
          url: '/pages/goods/goodsList/goodsList?cat_id=' + id
        });
      } else if (page_type == 3) {
        uni.navigateTo({
          url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + id
        });
      } else if (page_type == 0) {
        this.setData({
          webUrl: id
        });
        uni.navigateTo({
          url: '/pages/index/webview/webview'
        });
      } else {
        uni.reLaunch({
          url: '../../index/customPage/customPage?id=' + this.menu_model[idx].app_url
        });
      }
    },

    /** 默认菜单 */
    topages: function (e) {
      var idx = e.currentTarget.dataset.idx;
      app.globalData.menu_index = idx;
      common.defaultTotabar(idx, 3);
    },
    authorization: function () {
      //再授权
      uni.openSetting({
        success: res => {
          //因为openSetting会返回用户当前设置
          if (res.authSetting["scope.userInfo"] === true) {
            var that = this;
            app.globalData.getUserInfo(function (userInfo) {
              //更新数据
              that.setData({
                userInfo: userInfo
              });
            });
          } else {
            uni.showModal({
              title: '用户未授权',
              content: '如需正常使用小程序，请点击授权按钮。',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            });
          }
        }
      });
    },

    hidetabbar() {
      //隐藏默认tab
      uni.hideTabBar({
        fail: function () {
          setTimeout(function () {
            // 做了个延时重试一次，作为保底。
            uni.hideTabBar();
          }, 500);
        }
      });
    }

  }
};
</script>
<style>
/**index.wxss**/
.over_hide {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.des_flex_2{
  display: flex;
  align-items: center;
}
.des_flex_4{
  display: flex;
  align-items: center;
  justify-content: center;
}
.des_flex_3{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.clearfix:before,
.clearfix:after{
  content:" ";
  display:table;
  line-height: 0;
}
.clearfix:after{
  clear:both;
}
page{
  padding-bottom: 30rpx;
}
.main{
  margin-bottom: 105rpx;
}
.main image{
  display: block;
}
.topbox{
  width: 100%; 
  height: 425rpx;
  position: relative;
  overflow: hidden;
}
.topbox .rightbox{
  position: absolute;
  right: 0rpx;
  top: 12rpx;
  width: 160rpx;
  height: 75rpx;
}
.topbox .rightbox .left{
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
} 
.topbox .rightbox .right{
  width: 50%;
  height: 100%;
  float: left;
}
.topbox .rightbox image{
  width: 48rpx;
  height: 48rpx;
}
.topbox .topbg{
  position: absolute;
  left: 50%;
  width: 1500rpx;
  top: -375rpx;
  transform: translate(-50%);
  height: 704rpx;
  border-radius: 90%;
  /*background-image: linear-gradient(to right, rgb(255,30,30) , rgb(255,99,70));*/
  margin: 0 auto;
  z-index: 0;
  background-color: #ff6a00;
}
.topbox .bgimg{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 310rpx;
  opacity: 0.1;
}
.topbox .message{
  position: absolute;
  top: -5rpx;
  right: 19rpx;
  border-radius: 18rpx;
  background: #fff;
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
  font-size: 18rpx;
  text-align: center;
  color: #ff6a00;
}
/* 头像 */
.topbox .tou_fiter{
  position: absolute;
  top: 88rpx;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.topbox .tou_fiter .img{
  width: 120rpx;
  height: 120rpx;
  border: 6rpx solid rgba(255,255,255,1);
  box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  float: left;
}
.name_lan{
  float: left;
  height: 120rpx;
  max-width: 350rpx;
  margin-left: 30rpx;
  display: flex;
  align-items: center;
}
.topbox .tou_fiter .img image{
  width: 100%;
  height: 100%;
}
.topbox .tou_fiter .left .title{
  box-sizing: border-box;
  min-width:120rpx;
  display: inline-block;
  width: auto;
  color: #fff;
  height: 36rpx;
  border-radius: 18rpx;
  font-size: 20rpx;
  text-align: center;
  line-height: 36rpx;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4rpx 10rpx 0px rgba(255,106,76,0.4);
  margin-top: 15rpx;
  padding: 0 10rpx;
}
.topbox .tou_fiter .left .portrait{
  border: 2rpx solid #fff;
  line-height: 32rpx;
  margin-top: 54rpx;
}
.topbox .tou_fiter .center{
  font-size: 30rpx;
  color: #fff;
  height: auto;
  font-weight: bold;
}
/* 签到 */
.topbox .tou_fiter .sign_in_1{
  position: absolute;
  top: 0;
  right: 0;
  height: 120rpx;
  z-index: 99;
}
.sign_in_1 .sign_in{
  width: 190rpx;
  height: 54rpx;
  font-size: 22rpx;
  color: #fff;
  display: flex;
  align-items: center;
  border-radius: 27rpx 0 0 27rpx;
  background: linear-gradient(90deg,rgba(255,204,0,1) 0%,rgba(255,158,61,1) 100%);
  box-shadow: 0px 4rpx 10rpx 0px rgba(255,106,76,0.4);
}
.sign_in_1 .sign_in image{
  width: 24rpx;
  height: 24rpx;
  margin-left: 25rpx;
  margin-right: 8rpx;
}
/* 面额值 */
.topbox .topmain{
  width: 710rpx;
  height: 160rpx;
  border-radius: 10rpx;
  background: #fff; 
  margin: 0 auto;
  top: 248rpx;
  z-index: 10;
  position: relative;
  display: flex;
  align-items: center;
}
.topbox .topmain .toparea{
  width: 100%;
  height: 116rpx;
}
.topbox .topmain .left{
  position: relative;
  width: 198rpx;
  height: 100%;
  float: left;
}
.topbox .topmain .left image{
  position: absolute;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  box-sizing: border-box;
  border: 4rpx solid #fff;
  left: 40rpx;
  top: -70rpx; 
  box-shadow:0rpx 4rpx 9rpx 0rpx rgba(0, 0, 0, 0.1);
  background: #fff;

}
.topbox .topmain .right{
  position: relative;
  height: 54rpx;
  float: left;
  width: 100rpx;
  background:linear-gradient(90deg,rgba(255,106,76,1) 0%,rgba(255,153,51,1) 100%);
  box-shadow:0rpx 4rpx 9rpx 0rpx rgba(255,106,76,0.4);
  border-radius:27rpx 27rpx 27rpx 0rpx;
  margin-top: 36rpx;
  text-align: center;
  line-height: 54rpx;
  color: #fff;
  font-size: 22rpx;
}
.topbox .topmain .bottomarea{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.topbox .topmain .bottomarea .item{
  display: block;
  width: 33.3%;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}
.topbox .topmain .bottomarea .item:after{
  content: '';
  position: absolute;
  top: 20rpx;
  right: 0;
  width:1rpx;
  height:40rpx;
  background:#e5e5e5;
}
.topbox .topmain .bottomarea .item:last-child:after{
  content: '';
  position: absolute;
  width:0rpx;
  height:0rpx;
}
.topbox .topmain .bottomarea .item .num{
  color: #ff6a00;
  font-size: 30rpx;
  margin-bottom: 10rpx;
  font-weight: bold;
}
.topbox .topmain .bottomarea .item .word{
  font-size: 24rpx;
  font-weight:500;
  color:rgba(51,51,51,1);
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main .middlebox{
  width: 710rpx;
  margin: 0 auto;
  border-radius: 10rpx; 
  box-sizing: border-box;
  padding-top: 26rpx;
  background: #ffffff;
}
.main .middlebox .topnav{
  height: 30rpx;
  width: 100%;
  border-left: 6rpx solid rgba(255,76,76,1);
  padding-left: 16rpx;
  margin-bottom: 26rpx; 
  box-sizing: border-box;
  font-size: 30rpx;
  line-height: 30rpx;
}
.topnav .lid view{
  display: inline-block;
  font-size: 24rpx;
  color: #999;
}
.main .middlebox .topnav .icon{
  float: right;
  width: 24rpx;
  height: 24rpx;
}
.main .middlebox .mainbox{
  width: 100%;
  border-top: 1rpx solid #f3f3f3;
  box-sizing: border-box;
  height: 150rpx;
}
.main .middlebox .mainbox .item{
  width: 25%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  display: block;
}

.main .middlebox .mainbox .item .note{
  height: 36rpx;
  min-width: 36rpx;
  box-sizing: border-box;
  padding: 0 5rpx;
  line-height: 36rpx;
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  top: -11rpx;
  right: -14rpx;
  background: #ff6a00;
  border-radius: 18rpx;
  box-shadow: 0px 4rpx 10rpx 0rpx rgba(255,76,76,0.4);
}
.main .middlebox .mainbox .item .img{
  width: 56rpx;
  height: 56rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  position: relative;
}
.main .middlebox .mainbox .item image{
  width: 100%;
  height: 100%;
}
.main .middlebox .mainbox .item .p{
  width: 100%;
  font-size: 24rpx;
  color: #333;
  text-align: center;
}
/* 必备功能 */
.main .footbox{
  width: 710rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 20rpx;
  /* padding-top: 26rpx; */
  background: #ffffff;
}
.main .footbox .topnav{
  height: 30rpx;
  width: 100%;
  border-left: 6rpx solid rgba(255,76,76,1);
  margin-bottom: 26rpx; 
  box-sizing: border-box;
  font-size: 30rpx;
  line-height: 30rpx;
  padding-bottom: 16rpx;
  padding-left: 20rpx;
}
.main .footbox .mainbox{
  width: 100%;
  border-top: 1rpx solid #f3f3f3;
  box-sizing: border-box;
  background: #ffffff;
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 24rpx;
}
.main .footbox .mainbox .item{
  width: 25%;
  float: left;
  height: 160rpx;
  box-sizing: border-box;
  text-align: center;
}
.main .footbox .mainbox .item image{
  width: 72rpx;
  height: 72rpx;
  margin: 0 auto;
  display: block;
}
.main .footbox .mainbox .item .p{
  width: 100%;
  font-size: 24rpx;
  color: #666666;
  margin-top: 10rpx;
}
</style>